<template>
  <div class="mainos">
    <div class="main_spac1" style="padding-bottom: 5px">
      <div class="main_white padding10 paddingBottom20">
        <div class="main_crumbs boxdq">
          <div class="main_crumbs_l">
            <a href="javascript:;" @click="$router.back(-1)">
              <i class="el-icon-arrow-down"></i>返回
            </a>
            <em>|</em>
            <span>云商品库详情</span>
          </div>
        </div>
        <div class="main_tile boxdq marginTop10">
          <div class="main_tile_l marginLeft0"><em></em>基本信息</div>
        </div>
        <div class="main_xq">
          <ul class="boxha">
            <li>
              商品名称：
              <span>{{ info.info.name }}</span>
            </li>
            <li>
              商品分类：
              <span
                >{{ info.info.category_p ? info.info.category_p.title : "" }}|{{
                  info.info.category ? info.info.category.title : ""
                }}</span
              >
            </li>
            <li>
              商品别名：
              <span>{{ info.info.byname }}</span>
            </li>
            <li>
              关键词：
              <span>{{ info.info.pinyin }}</span>
            </li>
            <li>
              商品品牌：
              <span>{{
                info.info.brand_info ? info.info.brand_info.title : ""
              }}</span>
            </li>
            <li>
              编码(SPU)：
              <span>{{
                type == 1 ? info.info.standard_code : info.info.goods_code
              }}</span>
            </li>
            <!-- <li>
              商品描述：
              <span>{{ info.info.describe }}</span>
            </li> -->
            <!-- <li>
              上架状态：
              <span>{{ info.info.status==1?'上架':'下架' }}</span>
            </li> -->
            <!-- <li>
              首页推荐：
              <span>{{ info.info.is_recommend==1?'推荐':'不推荐' }}</span>
            </li> -->
            <li>
              标品：
              <span>{{ info.info.is_standard == 1 ? "是" : "否" }}</span>
            </li>
            <!-- <li>
              商品标签：
              <span>{{ (info.tag).join("，") }}</span>
            </li> -->
          </ul>
        </div>
        <div class="main_tile boxdq marginTop10">
          <div class="main_tile_l marginLeft0"><em></em>商品主图及详情</div>
        </div>
        <div class="main_xq">
          <ul class="boxha">
            <li class="main_w100 box">
              商品图片：
              <span class="box main_xqi">
                <div
                  class="main_xqi_i"
                  v-for="(pics, index) in info.info.pics"
                  :key="index"
                >
                  <label
                    class="el-upload-list__item-status-label"
                    v-if="pics.includes(info.info.pic)"
                  >
                    <i class="el-icon-upload-success el-icon-check"></i>
                  </label>
                  <el-image
                    fit="fill"
                    :src="pics"
                    :preview-src-list="info.info.pics"
                  >
                    <div slot="error" class="image-slot">
                      <img :src="puzzleImg" />
                    </div>
                  </el-image>
                </div>
              </span>
            </li>
            <li class="main_w100 box">
              商品详情：
              <div v-html="info.info.detail" class="main_xqm"></div>
              <div class="clearfix"></div>
            </li>
          </ul>
        </div>
        <div class="main_tile boxdq marginTop10">
          <div class="main_tile_l marginLeft0"><em></em>SKU设置</div>
        </div>
        <div class="main_table marginTop0" style="min-height: 390px">
          <el-table
            ref="multipleTable"
            v-loading="listLoading"
            :data="info.info.spu"
            element-loading-text="加载中"
            fit
            highlight-current-row
             :header-cell-class-name="this.$verticaline"
          >
            <el-table-column
              label="属性"
              prop="spu_name.title"
              class-name="main_hei"
            />
            <el-table-column
              label="单位"
              prop="spu_unit.title"
              class-name="main_hei"
            />
            <el-table-column
              label="包装数量"
              prop="package_num"
              class-name="main_hei"
            />
            <el-table-column
              label="编码sku"
              width="150"
              prop="standard_spu_code"
              class-name="main_hei"
            >
              <template slot-scope="scope">{{
                type == 1
                  ? scope.row.standard_spu_code
                  : scope.row.goods_spu_code
              }}</template>
            </el-table-column>
            <!-- <el-table-column label="采购价" prop="purchase_price" class-name="main_hei" /> -->
            <!-- <el-table-column label="市场价" prop="market_price" class-name="main_hei" /> -->
            <!-- <el-table-column label="起订量" prop="minimum" class-name="main_hei" /> -->
            <!-- <el-table-column label="损耗率" prop="attrition_rate" class-name="main_hei" /> -->
            <!-- <el-table-column label="状态" class-name="main_hei" >
              <template slot-scope="scope">{{ scope.row.status?'上架':'下架' }}</template>
            </el-table-column> -->
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import {
  standard_info,
  nonstandard_info,
} from "@/api/commodity/commodityGallery";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import { puzzleImg } from "@/api/currency";

export default {
  computed: {
    ...mapGetters(["avatar"]),
  },
  components: {},
  data() {
    return {
      // 基本信息
      info: {
        info: {
          brand_info: {
            title: "",
          },
          category_p: {
            title: "",
          },
          category: {
            title: "",
          },
          spu: [],
        },
        tag: [],
      },
      listLoading: false,
      puzzleImg,
      // id
      type: this.$route.params.type,
      id: this.$route.params.id,
    };
  },
  created() {
    // 基本信息
    this.information();
  },
  methods: {
    // 基本信息
    information() {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name, { id: this.id })) +
              apiUrl().appsecret
          ),
        },
        apiUrl().name,
        { id: this.id }
      );
      if (this.type == 1) {
        standard_info(data).then((res) => {
          if (res.errcode == 0) {
            res.data.tag = res.data.tag.map((e) => e.title);
            if (res.data.info) {
              res.data.info.pics = res.data.info.pics
                ? res.data.info.pics
                    .split(",")
                    .map((p) => this.avatar.domain + p)
                : [];
              this.info = res.data;
            }
          } else {
            this.$message.error(res.errmsg);
          }
        });
      } else {
        nonstandard_info(data).then((res) => {
          if (res.errcode == 0) {
            res.data.tag = res.data.tag.map((e) => e.title);
            res.data.info.pics = res.data.info.pics
              ? res.data.info.pics.split(",").map((p) => this.avatar.domain + p)
              : [];
            this.info = res.data;
          } else {
            this.$message.error(res.errmsg);
          }
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";

.mainos {
  .main_tile {
    .mainos_tile_r {
      color: $colour_red;
      font-size: $font_14;
    }
  }
  .main_xq {
    ul {
      li {
        .main_xqi {
          width: 80%;
          margin-left: 5px;
          .main_xqi_i {
            position: relative;
            width: 120px;
            overflow: hidden;
            /deep/.el-upload-list__item-status-label {
              position: absolute;
              right: -15px;
              top: -6px;
              z-index: 91;
              width: 40px;
              height: 24px;
              background: #13ce66;
              text-align: center;
              -webkit-transform: rotate(45deg);
              transform: rotate(45deg);
              -webkit-box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
              box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
              display: block;
              i {
                font-size: $font_12;
                margin-top: 11px;
                color: $white;
                -webkit-transform: rotate(-45deg);
                transform: rotate(-45deg);
              }
            }
          }
          /deep/.el-image .el-image__inner {
            width: 120px;
            height: 120px;
            border: 1px solid #f8f8f9;
            margin-right: 20px;
          }
          /deep/.el-image .image-slot img {
            width: 120px;
            height: 120px;
            border: 1px solid #f8f8f9;
            margin-right: 20px;
          }
        }
        .main_xqm {
          width: 90%;
          /deep/img {
            width: auto !important;
            height: auto !important;
            max-width: 100% !important;
            max-height: 100% !important;
          }
        }
      }
    }
  }
}
</style>
